<template>
	<div class="banner_box">
		<ul>
			<li v-for="val,index in imgList" :key="index" class="li_list"><img :src="val" class="img_list"></li>
		</ul>
		<div class="but_box">
			<img src="@/assets/images/右箭头.png" class="left_but" alt="" @click="prevSlide()" />
			<img src="@/assets/images/右箭头.png" class="right_but" alt="" @click="nextSlide()" />
		</div>
		<div class="point_box">
			<p class="point_val choosed"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
		</div>
	</div>
</template>

<script>
	// import indexApi from '@/api/indexApi'
	export default {
		data() {
			return {
				imgList: [
					`https://img2.baidu.com/it/u=3456583680,520701261&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500`,
					`https://img2.baidu.com/it/u=1349848593,1896883413&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800`,
					`https://img0.baidu.com/it/u=2020083015,685250494&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500`,
					`https://img2.baidu.com/it/u=923478948,106462584&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281`,
					`https://img1.baidu.com/it/u=2404815322,981417940&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313`
				],
				speed: 1,
				isAutoPlay: true,
				timeSpace: 1,
				currentIndex: 0,
				intervalId: null,
			}
		},
		mounted() {
			this.startAutoPlay();
		},
		// beforeDestroy() {
		// 	this.stopAutoPlay();
		// },
		methods: {
			startAutoPlay() {
				this.intervalId = setInterval(this.nextSlide, 3000); // 每3秒切换一次  
			},
			stopAutoPlay() {
				clearInterval(this.intervalId);
			},
			nextSlide() {
				this.currentIndex = (this.currentIndex + 1) % this.imgList.length;
			},
			prevSlide() {
				this.currentIndex = (this.currentIndex - 1 + this.imgList.length) % this.imgList.length;
			},
		},
	}
</script>

<style lang="scss">
	* {
		margin: 0px;
		padding: 0px;
	}

	.banner_box {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		min-width: 1080px;
		position: absolute;
		z-index: -1;
		margin: -60px auto;
	}

	ul li img {
		width: 100%;
		height: 100%;
	}

	.but_box {
		width: 100%;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;
		left: 0px;
		display: flex;
		justify-content: space-between;
	}

	.left_but {
		transform: rotate(180deg);
	}

	.left_but,
	.right_but {
		width: 50px;
		height: 50px;
	}

	.point_box {
		width: 120px;
		height: 100px;
		/* background-color: black; */
		position: absolute;
		bottom: 0px;
		left: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.point_val {
		width: 8px;
		height: 8px;
		border: 1px solid rgba(0, 0, 0, .05);
		border-radius: 50%;
		background: rgba(255, 255, 255, .4);
	}

	.choosed {
		width: 10px;
		height: 10px;
		border: 3px solid rgba(0, 0, 0, .1);
		background: #ffffff;
	}
</style>